style(a11y): improve WCAG accessibility across the website#69
Conversation
|
@MadhuTiwari-345 is attempting to deploy a commit to the Akash Kumar's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR targets WCAG-aligned accessibility improvements across the site UI by strengthening visible focus states, improving contrast, and refining semantic structure for better assistive technology support.
Changes:
- Adds
focus-visiblering styling to many interactive elements for clearer keyboard focus indication. - Improves contrast by adjusting multiple
text-gray-400/bg-gray-400usages to*-gray-300. - Improves semantics by introducing
header/footerwrappers in the shared layout and adds minor a11y metadata (e.g., titles / aria-labels).
Reviewed changes
Copilot reviewed 16 out of 16 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/ui/BackToTop.tsx | Adds visible keyboard focus ring styling to the back-to-top button. |
| src/components/terms/TermsOfService.tsx | Contrast tweaks for “last updated” and GitHub icon color. |
| src/components/privacy/PrivacyPolicy.tsx | Contrast tweaks in “last updated”, notes, and list bullets. |
| src/components/leaderboard/PublicLeaderboard.tsx | Improves contrast for error text, table header, and footer text. |
| src/components/layout/Navbar.tsx | Adds focus-visible rings to nav links/buttons; minor contrast tweak. |
| src/components/layout/Layout.tsx | Wraps Navbar/Footer with semantic header/footer containers. |
| src/components/layout/Footer.tsx | Adds focus-visible rings to social/link elements; minor contrast tweaks; adds Product Hunt title. |
| src/components/home/HeroSection.tsx | Adds focus-visible rings to CTAs; contrast tweaks; adds Product Hunt title. |
| src/components/home/FeaturesSection.tsx | Adds aria-labels, converts clickable cards to buttons, adds focus-visible rings and contrast tweaks. |
| src/components/download/ZipDownload.tsx | Contrast tweaks and refactor of progress bar rendering (currently breaks progress display). |
| src/components/download/PlatformsList.tsx | Replaces focus:ring-* with focus-visible:ring-* and adds focus styling to platform cards. |
| src/components/download/InstallationGuide.tsx | Contrast tweaks for step descriptions. |
| src/components/contact/ContactUs.tsx | Contrast tweaks for descriptive text and GitHub icon color. |
| src/components/about/AboutValues.tsx | Contrast tweaks in section description text. |
| src/app/not-found.tsx | Contrast tweak for the 404 description text. |
| src/app/layout.tsx | Adds suppressHydrationWarning to the <body>. |
Comments suppressed due to low confidence (1)
src/components/download/PlatformsList.tsx:127
- In the featured browser download link, the leading/trailing icons are decorative because the link already has descriptive text. Add
aria-hidden="true"to theFiDownload/FiExternalLinkicons (or otherwise hide them from assistive tech) to avoid extra screen reader verbosity.
className={`inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-gradient-to-r ${detectedPlatform.color} hover:brightness-110 transition-all text-white font-medium shadow-lg hover:shadow-xl hover:scale-105 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900`}
>
<FiDownload size={18} />
<span>Download for {detectedPlatform.name}</span>
<FiExternalLink size={16} className="group-hover:translate-x-1 transition-transform" />
</Link>
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Hi @akash-kumar-dev this issue passes all the check so can you merge the pr..? or is there any problem..? please let me know.. |
|
Hii @MadhuTiwari-345, everything looks good. Could you please review the Copilot suggestions one last time? Then we'll be good to merge. |
|
Hi @akash-kumar-dev, I’ve addressed the Copilot feedback, fixed the download progress bar behaviour, improved a11y semantics (decorative icons, button types), and resolved the footer nesting issue. Please let me know if you’d like any further tweaks! |
|
Regarding the recent commit, could you explain the addition of the theme provider? The PR title and related issue don't seem relevant to that change. Similarly, the changes in |
|
I’ve removed the ThemeProvider and unused hook, and fully reverted unrelated globals.css changes. I did it by mistake. |
akash-kumar-dev
changed the base branch from
main
to
style/accessibility-wcag
|
I've addressed the remaining issues, specifically the revert changes to global.css and the download progress bar fix, which were not included in your previous changes. I've resolved both of these. Thanks for your contributions @MadhuTiwari-345 . You can join our Discord server: https://discord.gg/Gtv9PFgaHZ |
akash-kumar-dev
merged commit f5f55b5
into
browseping:style/accessibility-wcag
2 participants
Description
This PR improves overall website accessibility by aligning the UI with WCAG guidelines.
The changes focus on keyboard navigation, visible focus states, color contrast, semantic HTML, and screen-reader compatibility across all pages.
Type of Change
Related Issue
Closes #66
Changes Made
Please list the specific changes made in this PR:
Added visible focus-visible states to all interactive elements (buttons, links, navigation items)
Improved text and UI color contrast to meet WCAG AA standards
Ensured full keyboard accessibility and correct tab order across all pages
Added or improved ARIA labels and hid decorative icons from screen readers
Verified and improved semantic HTML structure and heading hierarchy
Testing Done
Please describe how you tested your changes:
Tested in development mode (npm run dev)
Tested production build (npm run build && npm start)
Tested on multiple browsers (Chrome, Edge)
Tested on mobile devices/responsive design
Ran Lighthouse accessibility audit (score: 0.94)
Checked for console errors
Ran linting (npm run lint) (not required for this UI-only change)
Screenshots (if applicable)
Add screenshots or videos for UI changes here. Include before/after comparisons if relevant.
Checklist
IMPORTANT: Please ensure all items are checked before submitting. PRs that don't follow these guidelines may be closed.
Additional Notes
Accessibility was tested using keyboard-only navigation and screen readers (NVDA / VoiceOver).
Lighthouse accessibility audit passed with a score of 0.94.
Remember: Quality over quantity. A well-tested, properly documented small PR is better than a large, rushed contribution.
For more details, please refer to our Contributing Guidelines.